<template>
  <div class="guide">
    <!-- 头部tab -->
    <div class="header-wrap">
      <span class="header-wrap-left"  @click="goback">
        <i class="iconback iconfont icon-fanhui"></i>
      </span>
      <span class="header-wrap-text">社区服务指南</span>
      <span class="header-wrap-right">
        <!-- <i class="iconseach iconfont icon-sousuo"></i> -->
      </span>
    </div>
    <div style="margin-top:1.2rem;">
        <ul style="display: flex;flex-direction: row;flex-wrap: wrap;justify-content:space-between;padding:0 .2rem 1.2rem;">
          <li @click="guide(list.id,list.name)" style="border-radius: .1rem;box-shadow: -1px 1px 2px 2px #ddd;width: calc(50% - .1rem);margin-bottom:.2rem;" v-for="(list,index) in typeData" :key="index">
            <div class='noticeSwiper-img-box'>
              <img class="noticeSwiper-img" v-if="list.image" :src="host+list.image" alt="" >
              <img class="noticeSwiper-img" v-else src="../../assets/images/defaultImg.jpg" alt="">
            </div>
            <div class="noticeSwiper-content">
              <div class="noticeSwiper-list">
                <span class="noticeSwiper-tittle">{{list.name}}</span>
                <span class="guide-time">{{list.createtime | formatTime}}</span>
              </div>
           </div>
          </li>
        </ul>
    </div>
    <Tips v-if="show"/>
  </div>
</template>
<script>
import { Tab, Tabs, Rate } from 'vant';
import api from '../../api/api.js'
import Tips from '../../components/tips'
export default {
  filters: {
    formatTime: function time(value) {
    var now = new Date(value * 1000);
    var y = now.getFullYear();
    var m = now.getMonth() + 1;
    var d = now.getDate();
      return y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d) + " " + now.toTimeString().substr(0, 8);
    }
  },
  data(){
    return{
      show: false,
      length: null,
      host: api.host,
      activeName: '',
      typeId: null,
      listData:[],
      typeData: [],
    }
  },
  created(){
    this.menu()
    this.businesstype()
  },
  methods:{
    menu(){
      window.scrollTo(0, 0)
    },
    // toGuideList(id){
    //   this.$router.push({
    //     path: '/communityGuide',
    //     query: {
    //       id
    //     }
    //   })
    // },
    // 指南分类
    businesstype(){
       this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: '加载中...',
      });
      this.$get(api.Category, {
        params: {
          type: 4
        }
      })
      .then((response) => {
        this.typeData = response.data.data.list
        this.$toast.clear();
        this.typeId = response.data.data.list[0].id
      })
      .catch((error) => {
        this.$toast.clear();
        console.log(error)
      });
    },
    // 指南列表
    guide(id,name){
      this.$get(api.serviceList, {
        params: {
          category_id: id
        }
      })
      .then((response) => {
        this.listData = response.data.data.list
        if(this.listData.length>0){
          const id = response.data.data.list[0].id
          this.$router.push({
            path: '/communityGuideDtl',
            query: {
              id
            }
          })
        }else{
          this.$toast(name+'后台未添加内容！')
        }

      })
      .catch((error) => {
        console.log(error)
      });
    },
    goback(){
      this.$router.go(-1)
      // window.location.href = 'https://mall.nengyoukeji.com/app/index.php?i=23&c=entry&m=ewei_shopv2&do=mobile&wxref=mp.weixin.qq.com#wechat_redirect'
    },
  },
  components:{
    [Tab.name]:Tab,
    [Tabs.name]:Tabs,
    [Rate.name]: Rate,
    Tips
  }
}
</script>
<style>
.guide .van-tabs__wrap{
  /* border-top: 1px solid #423B6F; */
  /* border-bottom: 1px solid #423B6F; */
  width: 100%;
  z-index: 1000;
  position: fixed;
  top: 1rem;
  left: 0;
}
.van-tab,.van-tab--active{
  font-weight: bold;
}
.guide .van-tabs--line{
  padding-top: 2rem;
}
.van-tabs__wrap--scrollable .van-tab{
  flex: 0 0 35%!important;
}
</style>
<style scoped>
.guide-time{
  display: block;
  color: #FD5585;
  margin: .1rem 0;
}
.noticeSwiper{
  display: flex;
}
.noticeSwiper-img-box{
  height: 1.5rem;
  overflow: hidden;
}
.noticeSwiper-img{
  width: 100%;
  height: 100%;
  border-radius: .1rem .1rem 0 0;
}
.swiper-slide{
  /* border:.02rem solid #fff; */
  border-radius: .2rem;
  margin-right: .25rem!important;
}
.type{
  font-size: .32rem;
  display: flex;
  margin: 0 .25rem 0 .35rem;
  color: #000;
  height: 1rem;
  font-weight: bold;
  line-height: 1rem;
}
.type span:nth-of-type(1){
  flex: 1;
}
.type span:nth-of-type(2){
  width: auto;
  text-align: right;
  font-size: .28rem;
  color: #ee5a8a;
}
.noticeSwiper-content{
  font-size: .24rem;
  border-radius: 0 0 .2rem .2rem;
  background: #fff;
}
.noticeSwiper-list{
  position: relative;
  margin-left: .28rem;
  font-weight: bold;
}
.noticeSwiper-tittle{
  display: block;
  padding-top: .2rem;
  width: 88%;
  height: auto;
  color: #000;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
}
.noticeSwiper-time{
  display: block;
  margin-top: .1rem;
  width: 88%;
  height: .4rem;
  line-height: .4rem;
  color: #ee5a8a;
}
.noticeSwiper-rate{
  display: flex;
  position: absolute;
  top: 0.8rem;
  right: 0rem;
}
.iconwhole{
  color: #ee5a8a;
  font-size: .28rem;
}
.number{
  display: flex;
  flex: 1.5;
  color: #6b5da6;
}
.number span{
  flex: 1;
}
.number span img{
  width: .3rem;
  height: .3rem;
}
.collection{
  display: inline-block;
  text-align: right;
  margin-right: .25rem;
}
</style>
